/**
 * @Author: Your name
 * @Date:   2021-10-12 19:09:55
 * @Last Modified by:   Your name
 * @Last Modified time: 2021-10-13 14:39:52
 */



// 'use strict';
$(function () { 

    function getUrlParams(url) {
        //1.对url进行处理,把?号后面的参数匹配出来,使用正则进行匹配
        //http://127.0.0.1:5500/detail.html?id=20&age=99
        let reg = /^[^\s]+\?([^&\s\d]+=[^\s]+)*/
        let match = reg.exec(url)
        match = match[1]
        if (!match) {//表示没匹配到
            console.warn("没有匹配到相应的query参数")
            return null
        }
        // console.log(match);
        //对参数进行uri解码
        let queryString = decodeURI(match);
        // console.log(queryString);
        //将queryString以"&"符号为分割点 切割成为一个数组
        let queryArr = queryString.split("&");
        // console.log(queryArr);
        let queryParamsObj = {}//用于存储处理好的query数据
        queryArr.forEach(item => {
            let itemArr = item.split("=") //对每个item 'id=20'这样的切割成['id','20']
            queryParamsObj[itemArr[0]] = itemArr[1]
        })
        // console.log(queryParamsObj);
        //将最终处理的结果返回
        return queryParamsObj
    }



// /////////////////////////////////////////////////////////

    function render(data=[]) { 
        let html=''
        
        data.forEach(item=>{
            html+=`
            <li>
                <a href="../pages/categoryshoplistinformation.html?categoryid=${item.categoryId}&productid=${item.productId}">
                    <div class="left"> ${item.productImg}</div>
                            
                        <div class="right">
                            <div class="top">
                            <h6>${item.productName}</h6>
                            </div>
                            <span class='ddd'>${item.productPrice}</span>
                            <div class="buttom">
                                <span>${item.productQuote}</span>
                                <i class="spank">${item.productCom}</i> 
                            </div>
                        </div>
                </a>
            </li>
            `     
        })
        $('.info').html(html)
     }
 
    let qr = getUrlParams(location.href);
    console.log(qr.title);
    $('.backupclearfix').html(`<a href="index.html">首页&gt;</a>
    <a href="category.html">全部分类&gt;</a>
    <a href=>${qr.title}&gt;</a>
    <button>筛选</button>`)
    // http://chst.vip:1234/api/getproductlist?categoryid=0&pageid=1

    $.ajax({
        
        url: "http://chst.vip:1234/api/getproductlist",
        data:{
            categoryid:qr.categoryid
            
        }
        
    }).then(res=>{
       
    //    var a=Math.ceil(res.totalCount/res.pagesize)
        render(res.result);
        let page=Math.ceil(res.totalCount/res.pagesize)
      
        let arr=[]
        
        for (let index = 1; index <= page; index++) {
           arr[index-1]=index
            
        }
        
        let htmll 
        arr.forEach((item,index,value) => {
            htmll+=`
                    <option value="${item}">&nbsp;&nbsp;&nbsp;
                    ${item}/${page}
                    </option>
                    `   
        });
           $('#test').html(htmll)

        // 下拉菜单////////////////////////////////
        $('#test').on("change",function(){
            let page=Math.ceil(res.totalCount/res.pagesize)
            let o=Number($('#test').val())
            // console.log(o);

            // http://chst.vip:1234/api/getproductlist?categoryid=2&pageid=1
            $.ajax({
                url: "http://chst.vip:1234/api/getproductlist",
                data: {
                    categoryid:qr.categoryid,
                    pageid:o
                }
            }).then(res=>{
                // console.log(res.totalCount);
                render(res.result);
                
            })

            if(o>1){
                $('.next').attr("disabled", false)
                $('.black').attr("disabled", false)
            };
            if(o==1){
                $('.black').attr("disabled", true)
                $('.next').attr("disabled", false)

            }
            if(o==page){
                $('.next').attr("disabled", true)
                $('.black').attr("disabled", false)
                
            }
               
               







            
        })



        // 下一页//////////////////////////////////////////////////////
        $('.next').click(function () { 
            let n=Number($('#test').val())
            let page=Math.ceil(res.totalCount/res.pagesize)
            // console.log(page);
            if(n<page){
             n++
             $('#test').val(n)
             $.ajax({
                url: "http://chst.vip:1234/api/getproductlist",
                data: {
                    categoryid:qr.categoryid,
                    pageid:n
                    
                }
          })
          .then(res=>{
            //   console.log(res.totalCount);
              render(res.result);
          })
          
          $('.black').attr("disabled", false)
          
                   }else{
                 $('.next').attr("disabled", true)
                        }
           
            if(n==page){
                console.log(123);
                $('.next').attr("disabled", true)
            }
         })


        //  ///////////////////////////////////////////////
        // 上一页
        $('.black').click(function () { 
            let n=Number($('#test').val())
    
            if(n>1){
             n--
             $('#test').val(n)
             if(Number($('#test').val())==1){
                
               $('.black').attr("disabled", true)
            }
             $.ajax({
                url: "http://chst.vip:1234/api/getproductlist",
                data: {
                    categoryid:qr.categoryid,
                    pageid:n
                }
          })
          .then(res=>{
              console.log(res);
              render(res.result);
          })
          $('.next').attr("disabled", false)
                   }else{
                 $('.black').attr("disabled", true)
                        }
         })

        




        
    })




    
    
    
     
    
 })